import dash
import random
from dash import html, dcc
import feffery_antd_components as fac
from dash.dependencies import Input, Output, State, ClientsideFunction, MATCH

app = dash.Dash(__name__, update_title=None, compress=True)

app.layout = html.Div(
    [
        dcc.Interval(
            id='interval-demo',
            n_intervals=0,
            interval=1000
        ),
        html.Div(
            [
                dcc.Store(
                    id={
                        'type': 'store-demo',
                        'index': idx
                    },
                    data={
                        'x': [i for i in range(10)],
                        'y': [random.random() for i in range(10)]
                    }
                )
                for idx in range(8)
            ]
        ),

        # 响应式网格系统
        fac.AntdRow(
            [
                fac.AntdCol(
                    html.Div(
                        id={
                            'type': 'chart-container-demo',
                            'index': idx
                        },
                        style={
                            'height': '400px',
                            'borderRadius': '10px',
                            'padding': '25px',
                            'boxShadow': '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017'
                        }
                    ),
                    xxl=6,
                    lg=8,
                    sm=12,
                    xs=24,
                    style={
                        'padding': '10px'
                    }
                )
                for idx in range(8)
            ]
        )
    ],
    style={
        'padding': '25px'
    }
)


@app.callback(
    Output({'type': 'store-demo', 'index': MATCH}, 'data'),
    Input('interval-demo', 'n_intervals'),
    State({'type': 'store-demo', 'index': MATCH}, 'data'),
    prevent_initial_call=True
)
def update_data(n_intervals, data):
    return {
        'x': [*data['x'][1:], max(data['x']) + 1],
        'y': [*data['y'][1:], random.random()]
    }


app.clientside_callback(
    ClientsideFunction(
        namespace='clientside',
        function_name='render_chart'
    ),
    Output({'type': 'chart-container-demo', 'index': MATCH}, 'children'),
    Input({'type': 'store-demo', 'index': MATCH}, 'data')
)

if __name__ == '__main__':
    app.run_server(debug=True)
